<template>
  <div>
    <el-card>
      <Bread
        first="文章管理"
        second="文章列表"
        style="margin-bottom: 40px"
      ></Bread>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <div>
          <el-form-item label="文章分类">
            <el-select v-model="q.cate_id" placeholder="请选择分类">
              <el-option
                v-for="item in artlist"
                :key="item.id"
                :label="item.cate_name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发布状态">
            <el-select v-model="q.state" placeholder="请选择状态">
              <el-option label="已发布" value="已发布"></el-option>
              <el-option label="草稿" value="草稿"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">筛选</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="onReset">重置</el-button>
          </el-form-item>
        </div>
        <div>
          <el-form-item>
            <el-button type="primary" @click="pubArt">发布文章</el-button>
          </el-form-item>
        </div>
      </el-form>
      <!-- 数据列表 -->
      <!-- 表格 -->
      <el-table :data="list" style="width: 100%" stripe border>
        <el-table-column prop="title" label="文章标题" width="180">
          <template slot-scope="{ row }">
            <el-link @click="showDetail(row.id)" type="primary">{{
              row.title
            }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="cate_name" label="分类" width="180">
        </el-table-column>
        <el-table-column label="发表时间">
          <template slot-scope="scope">
            {{ scope.row.pub_date | format }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button type="danger" size="mini" @click="delFn(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 页码 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="q.pagenum"
      :page-sizes="[1, 2, 3, 4, 5]"
      :page-size="q.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 文章详情的对话框 -->
    <el-dialog title="文章预览" :visible.sync="infoVisible" width="80%">
      <!-- 展示详情的 -->
      <art-info :infoData="infoData"></art-info>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="infoVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
    <!-- 发布文章 -->
    <el-dialog fullscreen title="发布文章" :visible.sync="dialogFormVisible">
      <Artpub @closepud="updatepub"></Artpub>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
import { getArtlistApi, getArtInfo, delArtlist } from '../../api/art'
import ArtInfo from '../components/ArtInfo.vue'
import Artpub from '../components/Artput.vue'

export default {
  components: { ArtInfo, Artpub },
  name: '',
  data () {
    return {
      // 文章标题详情对话框
      infoVisible: false,
      infoData: {},
      // 发布文章
      dialogFormVisible: false,
      list: [],
      formInline: {
        user: '',
        region: ''
      },
      q: {
        pagenum: 1,
        pagesize: 2,
        cate_id: '',
        state: ''
      },
      total: 0
    }
  },
  created () {
    this.AfgetArtList()
    this.getlist()
  },
  computed: {
    ...mapState('article', ['artlist'])
  },
  methods: {
    ...mapActions('article', ['AfgetArtList']),
    // 重置按钮
    onReset () {
      this.q.cate_id = ''
      this.q.state = ''
    },
    // 筛选按钮
    onSubmit () {
      this.getlist()
    },
    // 获取文章列表函数
    async getlist () {
      const res = await getArtlistApi(this.q)
      console.log(res, 8989)
      this.list = res.data.data
      this.total = res.data.total
    },
    handleSizeChange (val) {
      //  获取每页显示多少条
      console.log(`每页 ${val} 条`)
      this.q.pagesize = val
      this.getlist() //  获取数据列表
    },
    handleCurrentChange (val) {
      //  获取当前页码数
      console.log(`当前页: ${val}`)
      this.q.pagenum = val
      this.getlist() //  获取数据列表
    },
    // 点击文章标题显示详情对话框
    async showDetail (id) {
      /*
       1、显示对话框
       2、发送请求
       3、展示数据到对话框中
       */
      this.infoVisible = true

      const res = await getArtInfo(id)
      console.log(res, 5656)
      this.infoData = res.data.data
    },
    // 发布文章
    pubArt () {
      /*
      1、显示对话框
      2、对话框中布局  并显示分类+校验
      3、图片上传
      4、发布文章 [发布文章按钮 + 存为草稿]
      5、关闭对话框
      6、更新数据
       */
      this.dialogFormVisible = true
    },
    // 根据id删除对应的文章
    async delFn (id) {
      const res = await delArtlist(id)
      console.log(res, 123)
      // console.log(id, 1234)
      if (res.data.code !== 0) return this.$message.error('删除文章失败！')
      this.$message.success('删除文章成功！')
      if (this.q.pagenum > 1 && this.artlist.length === 1) {
        // 则删除成功之后，当前页的数据条数为 0，需要请求上一页数据
        this.q.pagenum--
      }
      this.getlist() //  获取数据列表
    },
    updatepub () {
      this.dialogFormVisible = false
      this.getlist()
    }
  }
}
</script>
<style lang='less'  scoped>
.el-form {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
